<template>
<!--<top-header/>-->
<div class="container">
    <el-row>
        <el-col :span="24" class="user_top">

            <div class="user_img">
                <div class="user_con">
                    <div class="child"><img style="width: 60px; height: 60px" src="../assets/image/logo.png" /></div>
                    <div class="child"><el-text class="mx-1" size="large">NoteWave</el-text></div>
                </div>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24" class="user_top">
            <div class="user_img">
            <div class="grid-content" >
                <div class="grid-border">
                    <el-icon><House /></el-icon>&nbsp;&nbsp;<el-link href="/#/institution">Institution</el-link>
                </div>
                <div class="grid-border">
                    <el-icon><MessageBox /></el-icon>&nbsp;&nbsp;<el-link href="/#/tool">tools</el-link>
                </div>
                <div class="grid-border">
                    <el-icon><Message /></el-icon>&nbsp;&nbsp;<el-link href="/#/message">messages</el-link>
                </div>
                <div class="grid-border">
                    <el-icon><Setting /></el-icon>&nbsp;&nbsp;<el-link href="/#/setting">settings</el-link>
                </div>
                <div class="grid-border">
                    <el-icon><Help /></el-icon>&nbsp;&nbsp;<el-link href="/#/help">help</el-link>
                </div>
                <div class="grid-border">
                    <el-icon><More /></el-icon>&nbsp;&nbsp;<el-link href="/#/about">about</el-link>
                </div>
            </div>
            </div>
        </el-col>
    </el-row>
</div>
<!-- 底部信息 -->
<!--<top-bottom/>-->
</template>
<script setup>
import TopHeader from '../components/TopHeader.vue' // 引用Header组件
import TopBottom from '../components/TopBottom.vue' // 引用Header组件
import { reactive } from 'vue'
const user = reactive({
  img: 'src/assets/image/user.png',
  username: '' ,
  realname:'张三'

})

</script>
<style lang="less" scoped>

.user_top{
    text-align:center;
    margin-top: 20px;
}
.user_img{
    display:inline-block;
}
.user_img img{
    border-radius: 50%; /* 圆形 */
}
.user_con{
    text-align: center; /* 水平居中 */
}
.child {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
}
.grid-content{
   text-align: left; /* 水平居中 */
   width: 200px;
}
.grid-border{
    display: flex;
    align-items: center;
    vertical-align: middle;

    margin-top: 10px;
    margin-left: 10px;
    line-height: 40px;
    width:100%;
    border: 0px solid black; /* 1px宽，实线，黑色边框 */
    // min-height: 200px;
}

/* 强制设置图标颜色（深色模式下） */
.el-icon {
  color: #333 !important; /* 深色 */
}

/* 或者根据深色模式动态调整 */
@media (prefers-color-scheme: dark) {
  .el-icon {
    color: #999 !important; /* 浅灰色 */
  }
}

</style>
